.message {
    position: fixed;
    z-index: 1000;
    top: var(--margin-sm);
    left: 50%;
    transform: translateX(-50%);

    display: grid;
    gap: var(--margin-sm);

    &-item {
        display: flex;
        justify-content: center;
        opacity: 0;
        transition: all 0.2s cubic-bezier(0.1, 0.7, 1, 0.1);

        &.enter-active {
            transform: translateY(-20px);
            opacity: 0;
        }

        &.enter-done {
            transform: translateY(0);
            opacity: 1;
        }

        &.exit {
            transform: translateY(-20px);
            margin-bottom: -40px;
            opacity: 0;
        }

        &.exit-active {
            transform: translateY(-20px);
            opacity: 0;
        }
    }

    &-icon {
        display: inline-flex;
        align-items: center;

        &-success {
            color: rgb(var(--success-color));
        }

        &-info {
            color: rgb(var(--info-color));
        }

        &-warning {
            color: rgb(var(--warning-color));
        }

        &-error {
            color: rgb(var(--error-color));
        }
    }

    &-content {
        display: inline-flex;
        gap: var(--margin-xs);
        align-items: center;

        padding: var(--padding-base);

        font-size: var(--font-size-base);

        background-color: rgb(var(--color-white));
        border-radius: var(--border-radius-base);
        box-shadow: var(--box-shadow-lg);
    }
}
